@extends('layout.transporter_master')
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left w-100">
                    <h3>Driver Profile</h3>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Driver Details
                                <small>
                                    @if ($driver->status == 'active')
                                        <span class="badge badge-success text-white">Active</span>
                                    @elseif ($driver->status == 'inactive')
                                        <span class="badge badge-secondary text-white">Inactive</span>
                                    @elseif ($driver->status == 'suspended')
                                        <span class="badge badge-warning text-white">Suspended</span>
                                    @endif
                                </small>
                            </h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-md-3 col-sm-3 profile_left">
                                    <div class="profile_img">
                                        <div id="crop-avatar">
                                            <!-- Current avatar -->
                                            <img class="img-responsive avatar-view"
                                                src="{{ $driver->image ? asset('storage/' . $driver->image) : asset('images/user_logo.png') }}"
                                                alt="Driver Avatar" title="Driver Image"
                                                style="width:150px; height:150px; object-fit:cover;">


                                        </div>
                                    </div>
                                    <h3>{{ $driver->name }}
                                        @if ($driver->is_verified)
                                            <img src="{{ asset('images/Tick.png') }}" alt="Verified"
                                                style="width:25px; height:20px;">
                                        @endif
                                    </h3>

                                    <ul class="list-unstyled user_data">
                                        <li>
                                            <i class="fa fa-envelope user-profile-icon"></i> <strong>Email:</strong>
                                            {{ $driver->email }}
                                        </li>

                                        <li>
                                            <i class="fa fa-phone user-profile-icon"></i> <strong>Phone:</strong>
                                            {{ $driver->phone }}
                                        </li>
                                        @if ($driver->age)
                                            <li class="m-top-xs">
                                                <i class="fa fa-birthday-cake user-profile-icon"></i>
                                                <strong>Age:</strong>{{ $driver->age }} years
                                            </li>
                                        @endif
                                        @if ($driver->experience)
                                            <li class="m-top-xs">
                                                <i class="fa fa-expeditedssl user-profile-icon"></i>
                                                <strong>Experience:</strong>{{ $driver->experience }} years
                                            </li>
                                        @endif
                                    </ul>

                                    <a href="{{ route('driver.edit', $driver->id) }}" class="btn btn-success"><i
                                            class="fa fa-edit m-right-xs"></i>Edit Profile</a>
                                    <br />
                                </div>
                                <div class="col-md-9 col-sm-9 ">
                                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                                        <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                                            <li role="presentation" class="active"><a href="#tab_content2" role="tab"
                                                    id="profile-tab" data-toggle="tab" aria-expanded="false">Document
                                                    Details</a>
                                            </li>
                                        </ul>
                                        <div id="myTabContent" class="tab-content">
                                            <div role="tabpanel" class="tab-pane active table-responsive" id="tab_content2"
                                                aria-labelledby="profile-tab">
                                                <!-- start driver documents -->
                                                <table class="data table table-striped no-margin">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Document Name</th>
                                                            <th>Document Number</th>
                                                            <th>Status</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse($driver->documents as $index => $document)
                                                            <tr>
                                                                <td>{{ $index + 1 }}</td>
                                                                <td>{{ \App\Models\Document::documentTypes($document->doc_type) }}
                                                                </td>
                                                                <td>{{ $document->doc_number ?? '-' }}</td>
                                                                <td class="vertical-align-mid">
                                                                    @if ($document->is_verified ?? false)
                                                                        <span class="badge badge-success">Verified</span>
                                                                    @else
                                                                        <span class="badge badge-warning">Pending</span>
                                                                    @endif
                                                                </td>
                                                                <td class="vertical-align-mid">
                                                                    @if ($document->file_url)
                                                                        <a href="{{ asset('storage/' . $document->file_url) }}"
                                                                            target="_blank">View File</a>
                                                                    @else
                                                                        <span class="text-muted">No File</span>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="5" class="text-center text-muted">No
                                                                    documents
                                                                    uploaded</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                                <!-- end driver documents -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
@endpush